<template>
  <div id="ghview">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/guahao' }"
        >挂号与收费</el-breadcrumb-item
      >
      <el-breadcrumb-item>窗口挂号</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 主数据区域 -->
    <el-card class="box-card">
      <!-- 卡片化管理窗口新 -->
      <el-tabs type="border-card">
        <el-tab-pane label="自然信息">
          <!-- 填写患者自然信息 -->
          <!-- ref="form" ：段静迪 ： 第四种选择器， -->
          <el-form ref="form" :model="personinfo" label-width="100px">
            <el-form-item label="身份证号码">
              <el-row>
                <el-col :span="12">
                  <div>
                    <el-input
                      v-model="personinfo.pi"
                      placeholder="请输入身份证号码"
                      clearable
                    ></el-input>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div>
                    <el-button type="primary" @click="onSubmit"
                      >立即查询</el-button
                    >
                  </div></el-col
                >
              </el-row>
            </el-form-item>
            <el-form-item label="患者姓名">
              <el-input
                v-model="personinfo.name"
                placeholder="请输入患者姓名"
                prefix-icon="el-icon-user-solid"
              ></el-input>
            </el-form-item>
            <el-form-item label="出生日期">
              <el-date-picker
                v-model="personinfo.birthday"
                type="date"
                placeholder="选择日期"
                :picker-options="pickerOptions"
              >
                >
              </el-date-picker>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="onSubmit">立即创建</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="窗口挂号">配置管理</el-tab-pane>
        <el-tab-pane label="角色管理">角色管理</el-tab-pane>
        <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 出生日期快捷计算方式
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      // 患者自然信息对象
      personinfo: {
        pi: '150430202012121234',
        name: '东软集团',
        birthday: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      }
    }
  },
  methods: {
    onSubmit() {
      console.log('submit!')
    }
  }
}
</script>

<style scoped lang="less">
#ghview {
  .el-card {
    margin-top: 16px;
    border-radius: 10px;
    padding: 8px;
    .text {
      font-size: 14px;
    }

    .item {
      margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
      display: table;
      content: '';
    }
    .clearfix:after {
      clear: both;
    }

    .box-card {
      width: 480px;
    }
  }
}
</style>
